<template>
  <div>
    <MyChild>
      <!--隐式调用  -->
      <!-- <h3>123</h3> -->

      <!-- 显式调用 -->
      <template slot:default>
        <h3>123</h3>
      </template>
      <!-- 具名调用 -->
      <template slot="main" slot-scope="{ scope: { row } }">
        <button @click="testClicks(row)">测试插槽传参</button>
        <h5>main</h5>
      </template>
      <template slot="footer">
        <h5>footer</h5>
      </template>
    </MyChild>
  </div>
</template>

<script>
import MyChild from "@/component/childe.vue";
export default {
  components: { MyChild },
  data() {
    return {
      divInner: "<span>666</span>",
      inp: "",
      isShow: false,
      flage: false,
    };
  },
  created() {
    this.$nextTick(() => {
      // 就是等待dom挂载完成后执行
      // console.log(this.$refs.mybox, 123);
    });
  },
  methods: {
    testClicks(params) {
      console.log(params, 123);
    },
    testClick(params) {
      console.log(params, "123");
    },
    handleChange(e) {
      console.log(e, 123);
      this.inp = e.target.value;
      // this.$forceUpdate()//强制更新页面视图，不会触发浏览器刷新
    },
    handeleClick() {
      this.isShow = !this.isShow;
      console.log(this.$children);
    },
  },
};
</script>

<style>
</style>